<template>
  <div>
    <el-dialog title="报告事件" :visible.sync="isShow" width="600px">
      <el-form :model="form">
        <el-form-item
          label="事件类型"
          :label-width="(formLabelWidth = '100px')"
        >
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="碰撞" value="碰撞"></el-option>
            <el-option label="刮碰" value="刮碰"></el-option>
            <el-option label="失火" value="失火"></el-option>
            <el-option label="追尾" value="追尾"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="事件地点"
          :label-width="(formLabelWidth = '100px')"
        >
          <el-input v-model="form.place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="事件详情"
          :label-width="(formLabelWidth = '100px')"
        >
          <el-input type="textarea" v-model="form.describe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeVisible">取 消</el-button>
        <el-button type="primary" @click="submitReport">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'reportAccident',
  props: {
    dialogFormVisible1: '',
  },
  data() {
    return {
      dialogFormVisible: true,
      form: {
        place: '',
        type: [],
        describe: '',
      },
    }
  },
  computed: {
    isShow: {
      get() {
        return this.dialogFormVisible1
      },
      set(val) {
        this.$emit('send')
      },
    },
  },
  methods: {
    // 取消按钮，报告事件弹窗变为false
    changeVisible() {
      this.$emit('send')
    },
    // 提交按钮，将事件上传并且将弹窗变为false,刷新页面
    submitReport() {
      this.$http
        .post('/gg_event', {
          user_id: this.$cookies.get('status').user_id,
          event_type: this.form.type,
          event_addr: this.form.place,
          event_describe: this.form.describe,
        })
        .then((res) => {
          this.$message({
            message: '报告事件成功',
            type: 'success',
          })
          this.$emit('send')
          window.location.reload()
        })
    },
  },
}
</script>

<style></style>
